<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入字体图标样式表 iconfont.css -->
    <link rel="stylesheet" href="fonts/iconfont.css">
    <!-- 引入单位转换js rem.js -->
    <script src="js/rem.js"></script>
    <!-- 引入首页热榜样式表 indexHotList.css -->
    <link rel="stylesheet" href="css/indexHotList.css">
</head>
<body>
    <!-- 头部 -->
    <div id="head">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" placeholder="搜索知乎内容">
        <a href="#"> <span class="iconfont icon-yijianfankui"></span>
            提问</a>
    </div>
    <!-- 主体内容 -->
    <div id="main">
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">关注</a></li>
                <li><a href="#">推荐</a></li>
                <li><a href="#">热榜</a></li>
                <li><a href="#">视频</a></li>
            </ul>
        </div>
        <!-- 热榜内容 -->
        <div class="hotListContent">
            <div>
                <div>
                    <a href="#"><span>1</span>&emsp;有哪些视频堪称有毒？</a>
                    <div>2182万热度</div>
                </div>
                <div><a href="#"><img src="images/首页-热榜_03.jpg" alt=""></a>
                </div>
            </div>
            <div>
                <div>
                    <a href="#"><span>2</span>&emsp;如何看待美国检方宣布不起诉刘强东？</a>
                    <div>1344万热度</div>
                </div>
                <div><a href="#"><img src="images/首页-热榜_06.jpg" alt=""></a>
                </div>
            </div>
            <div>
                <div>
                    <a href="#"><span>3</span>&emsp;参与2019年考研是一种怎样的体验？</a>
                    <div>631万热度</div>
                </div>
                <div><a href="#"><img src="images/首页-热榜_08.jpg" alt=""></a>
                </div>
            </div>
            <div>
                <div>
                    <a href="#"><span>4</span>&emsp;如何评价2018KPL秋季赛决赛，Hero久竞4：3险胜BA黑凤梨夺冠，成功卫冕？</a>
                    <div>369万热度</div>
                </div>
                <div><a href="#"><img src="images/首页-热榜_10.jpg" alt=""></a>
                </div>
            </div>
            <div>
                <div>
                    <a href="#"><span>5</span>&emsp;张爱玲是一流作家吗？</a>
                    <div>308万热度</div>
                </div>

            </div>
        </div>
    </div>
    <!-- 页脚导航 -->
    <div id="foot">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-19"></span>
                    <div>首页</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-link_line"></span>
                    <div>想法</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-maozi"></span>
                    <div>大学</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-xiaoxi"></span>
                    <div>消息</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-wodedangxuan"></span>
                    <div>我的</div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>